<template>
  <div class="search h-100">
    <div class="header">
      <header-m
          @leftClick="headerLeftClick"
          @rightClick="search"
          @query="newQuery"
          @enterClick='search'
          @focus="focus"
          ref="header">
      </header-m>
    </div>
    <div class="search-prompt" v-show="!query">
      <recently-list ref="recentlyList"></recently-list>
      <love-list></love-list>
    </div>
    <ul class="search-key" v-if="isFocus && query">
      <li @click="setLabel(item.name)" v-for="item in keyList" :key="item.id">{{item.name}}</li>
    </ul>
    <div class="search-list" v-show="query && !isFocus">
      <shopping-list
          :shoppingList="searchList"
          @loadMore ="loadMore"
          :pullUpLoad="pullUpLoad"
          :pullDownRefresh="pullDownRefresh"
          @selectSorter = 'selectSorter'
          ref="shoppingList">
      </shopping-list>
    </div>

  </div>
</template>
<script>
  import { Toast } from 'mint-ui';
  import headerM from '@/components/header/header-m';
  import sorter from '@/components/sorter/sorter';
  import shoppingList from '@/components/shopping-list/shopping-list';

  import server from '@/api/server/index';
  import loading from '@/components/loading/loading';
  import loveList from '@/views/Search/loveList'; //猜你喜欢部分
  import recentlyList from '@/views/Search/recentlyList'; //最近搜索
  export default {
  	name:'keepAlive',
    data() {
      return {
        query: '',
        count:2,
        isFocus: false,
        sort: {}, //排序
        pullUpLoad: true, // 是否可以上拉加载
        pullDownRefresh: false, // 是否可以下拉加载
        searchList: [],
        keyList: []
      }
    },
    methods: {
      headerLeftClick() {
        this.$router.go(-1);
      },
      headerRightClick() {
        this.search();
      },
      newQuery(newQuery) {
        this.query = newQuery;
      },
      focus() {
        this.isFocus = true;
      },
      selectSorter({key,status}) {
        this.sort = true;
        this.search(this.sort);
      },
      search(sort = false){
        if(!this.query) return false;
        this.isFocus = false;

        let params = {
          query: this.query,
          sort: {
            key: this.sort.key,
            status: this.sort.status
          }
        };
        sort || (this.searchList = []); //不是点击排序按钮清空显示加载loading
        this.__search(params,(rs)=>{
          this.searchList = rs.searchList;
          this.count = rs.count;
          this.page = 1;
          if(this.count>1){
            this.$refs.shoppingList.openPullUp();
          }
          this.$refs.recentlyList.addRecently(this.query);// 添加搜索历史
        });
      },
      setLabel(val){
        this.$refs.header.setQuery(val);
        this.setLabelStauts = true;
      },
      loadMore() {
        this.page ++;
        let params = {
          query: this.query,
          page: this.page
        };
        this. __search(params,(rs)=>{
          let list = [];
          list = this.searchList.concat(rs.searchList);
          this.searchList = list;
          if (this.count <= this.page) {
            this.$refs.shoppingList.closePullUp();
          } else {
            this.$refs.shoppingList.finishPullUp();
          }
        });
      },
      __search(params,callback) {
        server.search(params).then((rs) => {
          callback(rs);
        }).catch((ms) => {
          Toast(ms);
          this.$refs.header.clear();
        });
      },
      __keyList(key) {
        server.searchKey(key).then((rs) => {
          this.keyList = rs.keyList;
        }).catch((ms) => {
          Toast(ms);
        });
      }
    },
    watch: {
      query(newQuery){
        if(this.setLabelStauts){
          this.setLabelStauts = false;
          this.search();
        } else {
          if(!newQuery) return;
          this.__keyList(newQuery);// 搜索联想词
        }
      }
    },
    activated(){
      // 离开组件在回来better-scroll会自动开启上拉
      if (this.count <= 0) {
        this.$refs.shoppingList.closePullUp();
      }
    },
    components: {
      headerM,
      loading,
      loveList,
      recentlyList,
      shoppingList
    }
  }
</script>
<style lang="less">
  @import '../../common/less/variable';
  .search{
    .header{
      .header-m{
        padding: 10px 0;
        color: @color-text;
        position: relative;
        background-color: @color-background-l;
        .left,.right{
          color: @color-text;
        }
        .con{
          .search{
            border: 1px solid @color-border;
          }
        }
      }
    }
    .search-key{
      border-top:1px solid @color-border-d;
      box-sizing: border-box;
      position: absolute;
      top: 50px;
      bottom: 54px;
      left: 0;
      width: 100%;
      padding: 0 10px 0 10px;
      background-color: @color-background-l;
      li{
        &:first-child{
          border: none;
        }
        font-size: 12px;
        padding: 15px 0;
        border-top:1px solid @color-border-d;
      }
    }
    .search-prompt{
      box-sizing: border-box;
      position: absolute;
      overflow: hidden;
      top: 50px;
      bottom: 54px;
      left: 0;
      width: 100%;
      padding: 0 10px;
      background-color: @color-background-l;
      .panel{
        padding: 2px 0;
        .tit{
          padding: 20px 5px 15px 5px;
          font-size: @font-size-medium;
          display: flex;
          justify-content:space-between;
          color: @color-text-l;
          .left{
            color: @color-text-l;
            font-weight: bold;
          }
          .icon{
            color: @color-text-h;
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
          }
          .icon-close-outline{
            font-size: 15px;
            width: 15px;
            height: 15px;
          }
          .icon-refresh{
            position: relative;
            width: 18px;
            height: 18px;
          }
        };
        ul{
          display: flex;
          flex-wrap:wrap;
          li{
            font-size: @font-size-medium;
            margin: 8px 8px;
            padding: 10px 10px;
            border-radius: 5px;
            background-color: @color-background-d;
          }
        }
        .panel-loading{
          padding: 50px 0;
        }
      }
    }
    .search-list{
      box-sizing: border-box;
      position: absolute;
      top: 50px;
      bottom: 54px;
      left: 0;
      width: 100%;
      overflow: hidden;
      padding: 5px 0 5px 0;
    }
    .panel-empty{
      padding: 40px 0;
      text-align: center;
      font-size: @font-size-medium;
      color: @color-text-h;
    }
  }
  .animation-rotate {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    -webkit-transition:-webkit-transform 0.8s linear;
    transition:transform 0.8s linear;
    transform-origin: 9px 8px;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
